<template>
	<view v-if="isShow">
		<page-container :show="isShow" position="center" :overlay="false" @beforeleave="onBeforeLeave">
			<view class="page-content">
				<view class="result">
					<u-navbar ref="navbarRef" class="van-nav-bar" :placeholder="true" title="百灵" @leftClick="back" :autoBack="false"></u-navbar>
					<view class="report-container" :style="{ height: domHeight }">
						<view class="loading-mask" v-if="loading">
							<view class="loading-content">
								<view class="loading-spinner"></view>
								<text class="loading-text">正在加载报告，请稍候...</text>
								<text class="loading-subtext">3秒后自动跳转</text>
							</view>
						</view>
						<view class="content-wrapper">
							<view class="content-section">
								<view class="section-title">
									<text class="title-text">报告优点</text>
									<view class="title-decoration"></view>
								</view>
								<view class="advantages" v-html="data"></view>
							</view>
						</view>
						<view class="payment-footer" v-if="type == 2">
							<view class="footer-backdrop"></view>
							<button class="payment-btn" @tap="handlePayment">
								<text class="btn-text">立即支付查看报告</text>
								<text class="btn-price">¥{{ reportPrice }}</text>
							</button>
						</view>
						<view class="notice-mask" v-if="type == 1">
							<view class="notice-content">
								<text class="notice-title">权限不足</text>
								<text class="notice-text">您没有查看此报告的权限</text>
								<button class="notice-btn" @tap="goBack">返回</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</page-container>
	</view>
</template>

<script>
import { getconfiguration } from '@/api/config/index.js';
import { reportStatus1, reportStatus, reportPayment, getAppraisal } from '@/api/evaluate/index.js';

export default {
	data() {
		return {
			qrId: 0,
			domHeight: '',
			appraisalId: '',
			detailId: '',
			type: '',
			data: '',
			loading: false,
			reportPrice: 0,
			fromPage: '',
			isShow: true
		};
	},
	onLoad(options) {
		this.appraisalId = options.appraisalId;
		this.detailId = options.id;
		this.qrId = options.qrId;
		//0企业用户免费看 1企业用户不能看 2一般用户未付款 3一般用户已付款
		getconfiguration({
			categoryName: '查看报告优点'
		}).then((res) => {
			this.data = res.data.configuration.replace(/<img/gi, '<img style="max-width:100%;height:auto;"');
		});

		getAppraisal(this.appraisalId).then((res) => {
			// console.log(res);
			this.reportPrice = res.data.reportPrice;
		});
		reportStatus1(this.qrId).then((res) => {
			this.type = res.msg * 1;
			// this.type = 1;
			if (this.type == 0 || this.type == 3) {
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
					this.$tab.navigateTo(`/subset/pages/evaluate/evaluateResultReport?appraisalId=${this.appraisalId}&id=${this.detailId}`);
				}, 3000);
			}
		});

		const pages = getCurrentPages();
		if (pages.length > 1) {
			const prevPage = pages[pages.length - 2];
			this.fromPage = prevPage.route;
			if (this.fromPage === 'subset/pages/evaluate/evaluateQuestion') {
				uni.setStorageSync('justQuestion', true);
			} else {
				uni.removeStorageSync('justQuestion');
			}
		}
	},
	methods: {
		onBeforeLeave() {
			this.isShow = false;
			// uni.showModal({
			// 	title: '确认返回',
			// 	success: (res) => {
			// 		if (res.confirm) uni.navigateBack();
			// 		else this.isShow = true;
			// 	}
			// });
			if (this.fromPage === 'subset/pages/evaluate/evaluateQuestion') {
				uni.navigateBack({
					delta: 2
				});
			} else {
				uni.navigateBack();
			}
		},
		handlePayment() {
			uni.showLoading({
				title: '支付中...',
				mask: true // 防止触摸穿透
			});
			reportPayment({
				id: this.detailId
			})
				.then((res) => {
					wx.requestPayment({
						appId: res.data.appId,
						nonceStr: res.data.nonceStr,
						package: res.data.packageVal,
						paySign: res.data.paySign,
						signType: res.data.signType,
						timeStamp: res.data.timeStamp,
						success: (res) => {
							this.$modal.showToast('支付成功');
							uni.hideLoading();
							// this.type = 3;
							// setTimeout(() => {
							this.loading = false;
							this.$tab.navigateTo(`/subset/pages/evaluate/evaluateResultReport?appraisalId=${this.appraisalId}&id=${this.detailId}`);
							// }, 200);
						},
						fail: (err) => {
							this.$modal.showToast('支付失败');
							uni.hideLoading();
						}
					});
				})
				.catch((err) => {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
				});
		},
		goBack() {
			if (this.fromPage === 'subset/pages/evaluate/evaluateQuestion') {
				uni.navigateBack({
					delta: 2
				});
			} else {
				uni.navigateBack();
			}
		},
		back() {
			if (this.fromPage === 'subset/pages/evaluate/evaluateQuestion') {
				uni.navigateBack({
					delta: 2
				});
			} else {
				uni.navigateBack();
			}
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		let statusBarHeight = systemInfo.statusBarHeight || 20;
		// 示例计算公式（具体需根据组件实现调整）
		const height = statusBarHeight + 44 + 'px'; // 状态栏高度 + 导航栏内容高度
		this.domHeight = `calc(100% - ${height})`;
	}
};
</script>

<style>
/* 基础样式 */
/* page {
		background: transparent;
	} */

page-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: transparent;
}

.page-content {
	width: 100%;
	height: 100%;
	background: white;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.result {
	width: 100%;
	height: 100%;
}

/* 主容器 */
.report-container {
	/* min-height: 100vh; */
	height: 100%;
	padding: 30rpx;
	background: linear-gradient(10deg, rgba(126, 191, 254, 0) 0%, #accdff 23%, #f2d3f2 32%, #9fb3f2 44%, #e9e3f2 73%, #d9ecff 100%);
	background-attachment: fixed;
	position: relative;
	overflow-y: auto;
}

/* 内容包装器 - 添加底部内边距给支付按钮留空间 */
.content-wrapper {
	padding-bottom: 120rpx;
	/* 为底部支付按钮留出空间 */
}

/* 内容区域 */
.content-section {
	background: rgba(255, 255, 255, 0.85);
	border-radius: 24rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.section-title {
	margin-bottom: 40rpx;
	position: relative;
	text-align: center;
}

.title-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #3a4a6d;
	position: relative;
	display: inline-block;
	padding: 0 30rpx;
	background: linear-gradient(to right, #6b8bf7, #a485f2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.title-decoration {
	position: absolute;
	bottom: -15rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 80rpx;
	height: 6rpx;
	background: linear-gradient(to right, #6b8bf7, #a485f2);
	border-radius: 3rpx;
}

.advantages {
	font-size: 30rpx;
	line-height: 1.6;
	color: #555;
}

/* 加载蒙层 - 更透明 */
.loading-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.5);
	/* 更浅的蒙版 */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	backdrop-filter: blur(1px);
	/* 减少模糊度 */
}

.loading-content {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 60rpx 50rpx;
	width: 70%;
	max-width: 500rpx;
	text-align: center;
	box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
}

.loading-spinner {
	width: 80rpx;
	height: 80rpx;
	border: 8rpx solid rgba(107, 139, 247, 0.2);
	border-top-color: #6b8bf7;
	border-radius: 50%;
	margin: 0 auto 30rpx;
	animation: spin 1s linear infinite;
}

.loading-text {
	font-size: 32rpx;
	color: #3a4a6d;
	display: block;
	margin-bottom: 10rpx;
	font-weight: 500;
}

.loading-subtext {
	font-size: 26rpx;
	color: #888;
	display: block;
}

/* 支付按钮底部栏 - 半透明白色 */
.payment-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 30rpx 40rpx;
	z-index: 10;
}

.footer-backdrop {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 165rpx;
	/* 足够覆盖按钮和间距 */
	background: #fff;
	backdrop-filter: blur(5px);
	z-index: -1;
}

.payment-btn {
	background: linear-gradient(to right, #6b8bf7, #a485f2);
	color: #fff;
	border-radius: 50rpx;
	font-size: 32rpx;
	height: 90rpx;
	line-height: 90rpx;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 10rpx 30rpx rgba(107, 139, 247, 0.4);
	width: 100%;
	position: relative;
	z-index: 1;
}

/* 调整内容区域底部间距 */
.content-wrapper {
	padding-bottom: 140rpx;
	/* 为底部支付按钮留出更多空间 */
}

.btn-text {
	flex: 1;
	text-align: center;
}

.btn-price {
	background: rgba(255, 255, 255, 0.3);
	padding: 0 20rpx;
	border-radius: 40rpx;
	margin-left: 20rpx;
	font-size: 28rpx;
	height: 50rpx;
	line-height: 50rpx;
}

/* 权限提示蒙层 - 更透明 */
.notice-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.5);
	/* 更浅的蒙版 */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	backdrop-filter: blur(1px);
	/* 减少模糊度 */
}

.notice-content {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 60rpx 50rpx;
	width: 70%;
	max-width: 500rpx;
	text-align: center;
	box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
}

.notice-icon {
	font-size: 80rpx;
	color: #ff6b6b;
	margin-bottom: 30rpx;
}

.notice-title {
	font-size: 36rpx;
	color: #3a4a6d;
	display: block;
	margin-bottom: 20rpx;
	font-weight: bold;
}

.notice-text {
	font-size: 30rpx;
	color: #666;
	display: block;
	margin-bottom: 40rpx;
}

.notice-btn {
	background: linear-gradient(to right, #ff6b6b, #ff8e8e);
	color: #fff;
	border-radius: 50rpx;
	font-size: 32rpx;
	height: 80rpx;
	line-height: 80rpx;
	border: none;
	width: 100%;
	box-shadow: 0 5rpx 20rpx rgba(255, 107, 107, 0.3);
}

/* 动画 */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* 图片样式重置 */
.advantages img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 12rpx;
	margin: 20rpx 0;
	box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
}
</style>
